<template>
  <div class="timeAxis-top-timeSolid" :style="{ borderColor: colorList5[store.styleInfo.colorType - 1].shmentColor }">
    <div class="solid-box-top">
      <div class="solid-box" v-for="item in 150" :key="item">
        <span
          class="solid-item"
          v-for="items in 5"
          :key="items"
          :class="{ 'solid-item-active': items === 1 }"
          :style="{ backgroundColor: colorList5[store.styleInfo.colorType - 1].shmentColor }"
        ></span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { colorList5 } from '../../data';
import { useProjectStore } from '@/store';

const store = useProjectStore();
const addParmasId = (info: any) => {};
</script>

<style lang="less" scoped>
.timeAxis-top-timeSolid {
  width: 100%;
  height: 21px;
  overflow: hidden;
  border-bottom: 1px solid transparent;
  margin-top: 20px;
}
.solid-box-top {
  display: flex;
  width: 120000px;
}
.solid-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 31.25px;
  height: 20px;
  padding-right: 5.25px;
}
.solid-item {
  opacity: 0.5;
}
.solid-item {
  border-radius: 0.5px;
  height: 9px;
  width: 1px;
}
.solid-item-active {
  border-radius: 0.5px;
  height: 19px;
  width: 1px;
}
.btm-box {
  width: 100%;
  height: 103px;
  margin-top: -13px;
  overflow: hidden;
}
.btm-box-scroll {
  width: 100%;
  height: 103px;
}
.child-list {
  height: 32px;
  width: 100%;
  // overflow-y: hidden;
  overflow-x: scroll;
  white-space: nowrap;
}
.child-list::-webkit-scrollbar {
  display: none;
}
.child-list-item {
  cursor: pointer;
  font-size: 18px;
  font-family: Source Han Serif CN-Medium, Source Han Serif CN;
  font-weight: 500;
  color: #46614b;
  line-height: 32px;
  margin-right: 30px;
  opacity: 0.7;
}
.child-list-item-active {
  opacity: 1;
}
</style>
